<template>
  <div v-if="show" class="dialog-mask">
    <div class="dialog-box">
      <div class="title-box">
        <div class="title">
          <category-title title="日志管理" title-sub="Log management"/>
        </div>
        <!-- <div class="close-icon" @click="$emit('close')">
          <close-outlined />
        </div> -->
        <!--        <div class="search-box">-->
        <!--          <div class="icon">-->
        <!--            <search-outlined />-->
        <!--          </div>-->
        <!--          <input v-model="searchContent" class="input" placeholder="请输入搜索内容">-->
        <!-- <div class="btn">
          搜索
        </div> -->
        <!--        </div>-->
      </div>
      <btn-filter :items="['操作日志', '告警日志', '推送日志']" :style="{ marginTop: '10px' }" @change="typeChange"/>
      <div class="log-infos">
        <div v-for="(logItem, logItemIndex) in logList" :key="logItemIndex" class="log-item-box">
          <div class="timeline">
            <div class="circle"/>
          </div>
          <div class="log-item">
            <div class="wrap-0">
              {{ logItem.name }}
            </div>
            <div class="wrap-1">
              {{ logItem.name }}
            </div>
            <div class="wrap-2">
              <div class="date">
                {{ logItem.sj }}
              </div>
<!--              <div class="operator">-->
<!--                操作员：李兆伟-->
<!--              </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <div class="btn-cancel" @click="$emit('close')">
          取 消
        </div>
        <div class="btn-confirm" @click="$emit('submit')">
          导出日志
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CategoryTitle from "../category-title/index.vue";
import BtnFilter from "@/components/customs/btn-filter/index.vue";
import {computed, ref} from "vue";
import {LogApi} from "@/configs/controller";
import {onMounted} from "@vue/runtime-core";

// eslint-disable-next-line no-undef
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

// eslint-disable-next-line no-undef
defineEmits(["submit", "close"]);

const searchContent = ref("");

const logList = ref([]);

const typeChange = async (index) => {
  index ? index++ : index = 1;
  const api = new LogApi();
  api.params({
    type: index,
    pageSize: 20,
    page: 1,
  });
  await api.send();
  const {data} = await api.getDatas();
  logList.value = data.data;
};

onMounted(() => {
  typeChange();
});
defineExpose({
  typeChange
})
const logDatas = computed(() => {
  const datas = new Array(20).fill(null).map((item, index) => `记录${index + 1}`);
  return datas.filter((item) => item.includes(searchContent.value));
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
